<template>
    <v-list-item density="comfortable" @click="navigate()">
        <template v-slot:prepend>
            <v-img width="120px" height="75px" style="margin-left: -1.5%;margin-right: 10px;" :src="props.blog.img"
                v-if="!props.blog.selfPublish" cover>
            </v-img>
        </template>
        <template v-slot:title>
            <span style="font-weight: bold;font-size: large;">{{ props.blog.title }}</span>
        </template>

        <template v-slot:subtitle>
            <span class="abstract">
                {{ props.blog.abstract }}
            </span>
        </template>

        <template v-slot:default>
            <div style="display: flex;margin-top: 5px;align-items: center;">
                <v-icon icon="mdi-eye" size="18" color="blue"></v-icon>
                <span class="property">{{ props.blog.browse }}</span>
                <v-icon icon="mdi-thumb-up" size="18" color="red"></v-icon>
                <span class="property">{{ props.blog.like }}</span>
                <v-icon icon="mdi-comment" size="18" color="grey"></v-icon>
                <span class="property">{{ props.blog.comment }}</span>
                <span style="margin-right: 0;" class="property" v-if="!props.blog.selfPublish">
                    作者: {{ props.blog.author }}
                </span>
            </div>
        </template>
    </v-list-item>
</template>
<script setup lang="ts">
import type { BlogPreview } from '@/models/blog';
import router from '@/router';

const props = defineProps<
    { blog: BlogPreview }
>()

function navigate() {
    router.push({ name: 'blog-detail', query: { id: props.blog.id } })
}
</script>
<style scoped>
.abstract {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: gray;
    font-size: small;
    margin-top: 5px;
}

.property {
    font-size: small;
    margin-right: 25px;
    padding-left: 2px;
    width: 20px;
    white-space: nowrap;
}
</style>